{% extends 'base.html' %}

{% block css %}
    <link rel="stylesheet" href="/static/css/select2.min.css">
{% endblock %}

{% block content %}
    <section class="content-header">
        <h1>
            命令执行
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-server"></i> 任务编排</a>
            <li><a href="{% url 'assets:asset_list' %}"> 批量执行</a></li>
            <li class="active"><a href="#">命令执行</a></li>
        </ol>
    </section>
    <!-- Main content -->
    <section class="content">
        <!-- Small boxes (Stat box) -->
        <div class="row">
            <div class="col-md-12">
                <!-- general form elements disabled -->
                <div class="box box-warning">
                    <div class="box-header with-border">
                        <h3 class="box-title">请填写执行命令信息</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <form id="shell-form" class="form-horizontal" method="POST">
                            <!-- text input -->
                            {% csrf_token %}
                            {% for shell_val in form %}
                                <div class="form-group">
                                    <div class="col-md-2 control-label">
                                        {{ shell_val.label }}
                                        资产
                                    </div>
                                    <div class="col-md-8">
                                        <p>{{ shell_val }}</p>
                                    </div>
                                </div>
                            {% endfor %}

                            <div class="box-footer">
                                <button id="submit" type="submit" class="btn btn-primary">提 交</button>
                            </div>
                            <div class="form-group">
                                <div class="col-md-2 control-label">
                                    <label for="name">返回结果</label>
                                </div>
                                <div data-spy="scroll" class="col-md-8" id='res' style="overflow:auto; background-color: black; height: 300px; color: white;">
                                    {{ ret }}
                                </div>
                            </div>
                        </form>
                    </div>

                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
        </div>
    </section>
{% endblock %}

{% block js %}
    <!-- Select2 -->
    <script src="/static/js/select2.full.min.js"></script>
    <script src="/static/js/moment.min.js"></script>
    <!-- InputMask -->

    <script src="/static/plugins/input-mask/jquery.inputmask.js"></script>
    <script src="/static/plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
    <script src="/static/plugins/input-mask/jquery.inputmask.extensions.js"></script>
    <script>
        $(function () {
            $('.select2').select2();
            $('[data-mask]').inputmask();
            {#$('#res').html({{ ret }});#}

        });

        $(document).ready(function () {
            $('#shell-form').submit(function () {
                var assets = $('#assets').valueOf();
                var asset_groups = $('#asset_groups').valueOf();
                var shell = $('#shell').val();
                $.ajax({
                    type: 'POST',
                    url: '{% url 'ops:shell_exec' %}',
                    data: {
                        'assets': assets,
                        'asset_groups': asset_groups,
                        'shell': shell
                    },
                    dataType: 'html',
                    cache: false
                });
                return false;
            });
            $('#g-5').addClass('active');
            $('#g-5-1').addClass('active');
        });
    </script>
{% endblock %}
